<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息通知 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式 */
    :root {
      --primary: #4263EB;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --unread: #E8F0FE;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      padding-bottom: 20px;
    }
    
    /* 页面容器 */
    .notification-pages {
      min-height: 100vh;
    }
    
    .notification-page {
      display: none;
    }
    
    .notification-page.active {
      display: block;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
    }
    
    /* 通知分类标签 */
    .notification-tabs {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      position: sticky;
      top: 60px;
      z-index: 90;
    }
    
    .tab-btn {
      flex: 1;
      min-width: 80px;
      padding: 12px 0;
      background: none;
      border: none;
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      position: relative;
    }
    
    .tab-btn.active {
      color: var(--primary);
    }
    
    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    .tab-badge {
      position: absolute;
      top: 8px;
      right: 10px;
      background-color: var(--danger);
      color: white;
      font-size: 11px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 通知列表 */
    .notification-list {
      background-color: var(--white);
    }
    
    .notification-item {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 12px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .notification-item.unread {
      background-color: var(--unread);
    }
    
    .notification-item:hover {
      background-color: rgba(0,0,0,0.02);
    }
    
    .notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 20px;
    }
    
    .icon-primary {
      background-color: rgba(66, 99, 235, 0.1);
      color: var(--primary);
    }
    
    .icon-success {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--success);
    }
    
    .icon-warning {
      background-color: rgba(251, 191, 36, 0.1);
      color: var(--warning);
    }
    
    .icon-danger {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .notification-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .notification-text {
      font-size: 15px;
      line-height: 1.4;
      margin-bottom: 4px;
    }
    
    .notification-time {
      font-size: 12px;
      color: var(--gray);
      text-align: right;
    }
    
    .notification-highlight {
      font-weight: 600;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--gray);
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .empty-subtext {
      font-size: 14px;
      opacity: 0.8;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：默认蓝 */
    #style1 .notification-tabs .tab-btn.active {
      color: var(--primary);
    }
    
    #style1 .notification-tabs .tab-btn.active::after {
      background-color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --unread: #FFFFFF;
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .notification-list {
      background-color: transparent;
      padding: 10px;
    }
    
    #style2 .notification-item {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 10px;
      border-bottom: none;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    #style2 .notification-item.unread {
      border: 2px solid var(--primary);
      padding: 12px 14px;
    }
    
    #style2 .notification-tabs {
      background-color: #F0F2F5;
      border-bottom: none;
      padding: 0 10px;
    }
    
    #style2 .tab-btn {
      padding: 8px 0;
      margin: 8px 0;
    }
    
    #style2 .tab-btn.active {
      background-color: var(--white);
      border-radius: 20px;
      color: var(--primary);
    }
    
    #style2 .tab-btn.active::after {
      display: none;
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --unread: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .page-header,
    #style3 .notification-tabs,
    #style3 .notification-list {
      background-color: var(--white);
    }
    
    #style3 .tab-btn {
      color: var(--gray);
    }
    
    #style3 .notification-item:hover {
      background-color: rgba(255,255,255,0.05);
    }
    
    #style3 .empty-icon {
      color: #374151;
    }
    
    /* 风格4：简约风 */
    #style4 {
      --primary: #374151;
      --unread: rgba(0,0,0,0.03);
    }
    
    #style4 .notification-icon {
      width: 24px;
      height: 24px;
      font-size: 16px;
    }
    
    #style4 .notification-item {
      padding: 12px 16px;
    }
    
    #style4 .notification-text {
      font-size: 14px;
    }
    
    #style4 .notification-tabs {
      border-bottom: none;
    }
    
    #style4 .tab-btn {
      font-size: 14px;
      padding: 10px 0;
    }
    
    #style4 .unread-indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: var(--primary);
      border-radius: 50%;
      margin-right: 6px;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 通知页面容器 -->
  <div class="notification-pages">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="notification-page active">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="header-title">消息通知</div>
        <div class="header-actions">
          <button class="header-btn" id="settingsBtn1">
            <i class="fa fa-cog"></i>
          </button>
        </div>
      </div>
      
      <!-- 通知分类标签 -->
      <div class="notification-tabs">
        <button class="tab-btn active">
          全部
          <span class="tab-badge">8</span>
        </button>
        <button class="tab-btn">
          互动
          <span class="tab-badge">5</span>
        </button>
        <button class="tab-btn">
          系统
          <span class="tab-badge">2</span>
        </button>
        <button class="tab-btn">
          活动
          <span class="tab-badge">1</span>
        </button>
      </div>
      
      <!-- 通知列表 -->
      <div class="notification-list">
        <!-- 未读通知 - 点赞 -->
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-heart"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">李华</span> 和另外 3 人赞了你的动态
            </div>
            <div class="notification-time">刚刚</div>
          </div>
        </div>
        
        <!-- 未读通知 - 评论 -->
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-comment"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">王芳</span> 评论了你的帖子："这个想法太棒了！我也觉得..."
            </div>
            <div class="notification-time">10分钟前</div>
          </div>
        </div>
        
        <!-- 未读通知 - 系统 -->
        <div class="notification-item unread">
          <div class="notification-icon icon-warning">
            <i class="fa fa-bell"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你的账号已完成实名认证，现在可以发布商业内容
            </div>
            <div class="notification-time">1小时前</div>
          </div>
        </div>
        
        <!-- 已读通知 - 关注 -->
        <div class="notification-item">
          <div class="notification-icon icon-success">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">创意工作室</span> 关注了你，现在可以查看他们的动态
            </div>
            <div class="notification-time">昨天</div>
          </div>
        </div>
        
        <!-- 已读通知 - 活动 -->
        <div class="notification-item">
          <div class="notification-icon icon-primary">
            <i class="fa fa-calendar"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你报名的 <span class="notification-highlight">设计师交流会</span> 将于明天下午2点开始
            </div>
            <div class="notification-time">2天前</div>
          </div>
        </div>
        
        <!-- 已读通知 - 系统 -->
        <div class="notification-item">
          <div class="notification-icon icon-danger">
            <i class="fa fa-exclamation-circle"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你的账号安全验证即将过期，请尽快更新验证信息
            </div>
            <div class="notification-time">3天前</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="notification-page">
      <div class="page-header">
        <button class="header-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="header-title">消息通知</div>
        <div class="header-actions">
          <button class="header-btn" id="settingsBtn2">
            <i class="fa fa-cog"></i>
          </button>
        </div>
      </div>
      
      <div class="notification-tabs">
        <button class="tab-btn active">
          全部
          <span class="tab-badge">8</span>
        </button>
        <button class="tab-btn">
          互动
        </button>
        <button class="tab-btn">
          系统
        </button>
        <button class="tab-btn">
          活动
        </button>
      </div>
      
      <div class="notification-list">
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-heart"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">李华</span> 和另外 3 人赞了你的动态
            </div>
            <div class="notification-time">刚刚</div>
          </div>
        </div>
        
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-comment"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">王芳</span> 评论了你的帖子："这个想法太棒了！我也觉得..."
            </div>
            <div class="notification-time">10分钟前</div>
          </div>
        </div>
        
        <div class="notification-item unread">
          <div class="notification-icon icon-warning">
            <i class="fa fa-bell"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你的账号已完成实名认证，现在可以发布商业内容
            </div>
            <div class="notification-time">1小时前</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-success">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">创意工作室</span> 关注了你，现在可以查看他们的动态
            </div>
            <div class="notification-time">昨天</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-primary">
            <i class="fa fa-calendar"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你报名的 <span class="notification-highlight">设计师交流会</span> 将于明天下午2点开始
            </div>
            <div class="notification-time">2天前</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="notification-page">
      <div class="page-header">
        <button class="header-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="header-title">消息通知</div>
        <div class="header-actions">
          <button class="header-btn" id="settingsBtn3">
            <i class="fa fa-cog"></i>
          </button>
        </div>
      </div>
      
      <div class="notification-tabs">
        <button class="tab-btn active">
          全部
          <span class="tab-badge">8</span>
        </button>
        <button class="tab-btn">
          互动
          <span class="tab-badge">5</span>
        </button>
        <button class="tab-btn">
          系统
          <span class="tab-badge">2</span>
        </button>
        <button class="tab-btn">
          活动
          <span class="tab-badge">1</span>
        </button>
      </div>
      
      <div class="notification-list">
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-heart"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">李华</span> 和另外 3 人赞了你的动态
            </div>
            <div class="notification-time">刚刚</div>
          </div>
        </div>
        
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-comment"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">王芳</span> 评论了你的帖子："这个想法太棒了！我也觉得..."
            </div>
            <div class="notification-time">10分钟前</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-success">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">创意工作室</span> 关注了你，现在可以查看他们的动态
            </div>
            <div class="notification-time">昨天</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-primary">
            <i class="fa fa-calendar"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              你报名的 <span class="notification-highlight">设计师交流会</span> 将于明天下午2点开始
            </div>
            <div class="notification-time">2天前</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风 -->
    <div id="style4" class="notification-page">
      <div class="page-header">
        <button class="header-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="header-title">消息通知</div>
        <div class="header-actions">
          <button class="header-btn" id="settingsBtn4">
            <i class="fa fa-cog"></i>
          </button>
        </div>
      </div>
      
      <div class="notification-tabs">
        <button class="tab-btn active">全部</button>
        <button class="tab-btn">互动</button>
        <button class="tab-btn">系统</button>
        <button class="tab-btn">活动</button>
      </div>
      
      <div class="notification-list">
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-heart"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="unread-indicator"></span>
              <span class="notification-highlight">李华</span> 等4人赞了你的动态
            </div>
            <div class="notification-time">刚刚</div>
          </div>
        </div>
        
        <div class="notification-item unread">
          <div class="notification-icon icon-primary">
            <i class="fa fa-comment"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="unread-indicator"></span>
              <span class="notification-highlight">王芳</span> 评论了你的帖子
            </div>
            <div class="notification-time">10分钟前</div>
          </div>
        </div>
        
        <div class="notification-item unread">
          <div class="notification-icon icon-warning">
            <i class="fa fa-bell"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="unread-indicator"></span>
              账号已完成实名认证
            </div>
            <div class="notification-time">1小时前</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-success">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">创意工作室</span> 关注了你
            </div>
            <div class="notification-time">昨天</div>
          </div>
        </div>
        
        <div class="notification-item">
          <div class="notification-icon icon-primary">
            <i class="fa fa-calendar"></i>
          </div>
          <div class="notification-content">
            <div class="notification-text">
              <span class="notification-highlight">设计师交流会</span> 明天开始
            </div>
            <div class="notification-time">2天前</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.notification-page').forEach(page => {
          page.classList.remove('active');
        });
        document.getElementById(styleId).classList.add('active');
      });
    });
    
    // 标签切换功能
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 只在当前活跃页面中切换标签
        const activePage = document.querySelector('.notification-page.active');
        if (this.closest('.notification-page') === activePage) {
          // 更新当前页面的标签状态
          activePage.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
          this.classList.add('active');
          
          // 这里可以添加加载对应分类通知的逻辑
          console.log('切换到标签: ' + this.textContent.trim().split('\n')[0]);
        }
      });
    });
    
    // 通知项点击事件
    document.querySelectorAll('.notification-item').forEach(item => {
      item.addEventListener('click', function() {
        // 标记为已读
        this.classList.remove('unread');
        
        // 模拟点击通知后的操作
        const notificationText = this.querySelector('.notification-text').textContent;
        console.log('查看通知: ' + notificationText);
      });
    });
    
    // 返回按钮功能
    document.querySelectorAll('[id^="backBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('返回上一页');
      });
    });
    
    // 设置按钮功能
    document.querySelectorAll('[id^="settingsBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('打开通知设置');
      });
    });
    
    // 模拟收到新通知
    setTimeout(() => {
      const activePage = document.querySelector('.notification-page.active');
      const notificationList = activePage.querySelector('.notification-list');
      
      // 创建新通知元素
      const newNotification = document.createElement('div');
      newNotification.className = 'notification-item unread';
      newNotification.innerHTML = `
        <div class="notification-icon icon-success">
          <i class="fa fa-gift"></i>
        </div>
        <div class="notification-content">
          <div class="notification-text">
            你有一个新的 <span class="notification-highlight">系统奖励</span> 待领取
          </div>
          <div class="notification-time">刚刚</div>
        </div>
      `;
      
      // 添加点击事件
      newNotification.addEventListener('click', function() {
        this.classList.remove('unread');
        alert('领取系统奖励');
      });
      
      // 添加到列表顶部
      notificationList.insertBefore(newNotification, notificationList.firstChild);
      
      // 更新未读数量
      const allTab = activePage.querySelector('.tab-btn:first-child .tab-badge');
      if (allTab) {
        const currentCount = parseInt(allTab.textContent);
        allTab.textContent = currentCount + 1;
      } else {
        // 如果没有徽章则创建一个
        const firstTab = activePage.querySelector('.tab-btn:first-child');
        firstTab.innerHTML += '<span class="tab-badge">1</span>';
      }
    }, 5000);
  </script>
</body>
</html>
